<template>
  <div class="container">
    <el-dialog title="小店入驻信息" :visible.sync="dialogShow" :close-on-click-modal="false" width="800px">
      <div class="box">
        <div class="title">基础信息</div>
        <div class="base-info">
          <div class="base-item">
            <span class="label" style="width:60px">门店名称:</span>
            <span>{{ joinInfo.name }}</span>
          </div>
          <div class="base-item" style="width:400px">
            <span class="label">小店地址:</span>
            <span>{{ joinInfo.address }}</span>
          </div>
          <div class="base-item">
            <span class="label" style="width:60px">联系人:</span>
            <span>{{ joinInfo.memberName }}</span>
          </div>
          <div class="base-item">
            <span class="label">邀请者主账号:</span>
            <span>{{ joinInfo.partnerName }}</span>
          </div>
          <div class="base-item">
            <span class="label" style="width:60px">联系电话:</span>
            <span>{{ joinInfo.contactPhone }}</span>
          </div>
          <!-- <div class="base-item">
            <span class="label" style="width:90px">邀请人子账号:</span>
            <span>{{ joinInfo.invitation_operate_mobile }}</span>
          </div> -->
          <div class="base-item">
            <span class="label" style="width:60px">用户账号:</span>
            <span>{{ joinInfo.memberId }}</span>
          </div>
        </div>
        <div class="title">小店信息</div>
        <div class="shop-info">
          <el-row class="photo">
            <el-col :span="6">
              <div>
                <span>营业执照:</span>
                <img v-if="joinInfo.licensePicture !== ''" :src="joinInfo.licensePicture" alt="">
                <span v-else class="no-data">暂无</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div>
                <span>店主身份证:</span>
                <span v-for="(item, index) in joinInfo.idPicture" :key="index">
                  <img :src="item" alt="">
                </span>
                <!-- <img :src="joinInfo.idPicture.split(',')[1]" alt=""> -->
                <!-- <span v-else class="no-data">暂无</span> -->
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span>商户门头照:</span>
                <img v-if="joinInfo.image !== ''" :src="joinInfo.image" alt="">
                <span v-else class="no-data">暂无</span>
              </div>
            </el-col>
            <!-- <el-col :span="6">
              <div>
                <span>合同照:</span>
                <img v-if="joinInfo.licensePicture !== ''" :src="joinInfo.licensePicture" alt="">
                <span v-else class="no-data">暂无</span>
              </div>
            </el-col> -->
          </el-row>
          <div class="base-info">
            <div class="base-item">
              <span class="label" style="width:60px">缴费类型:</span>
              <span>{{ joinInfo.vip_shop_pay_type === 1 ? '全额缴费入驻' : joinInfo.vip_shop_pay_type === 2 ? '押金缴费入驻' : '无'
                }}</span>
            </div>
            <div class="base-item">
              <span class="label">小店类型:</span>
              <span>{{ joinInfo.sellerType === "1" ? '收款门店' : joinInfo.sellerType === "2" ? '实体门店' : joinInfo.sellerType
                ===
                "3"
                ?
                '企业连锁' : '商场百货' }}</span>


            </div>
            <div class="base-item">
              <span class="label" style="width:60px">店铺面积:</span>
              <span>{{ (joinInfo.shopArea !== "null" && joinInfo.shopArea !== "") ? `${joinInfo.shopArea}m²` :
                '' }}</span>
            </div>
            <div class="base-item">
              <span class="label">店铺人数:</span>
              <span>{{ (joinInfo.shopClerks !== "null" && joinInfo.shopClerks !== "") ? `${joinInfo.shopClerks}人` :
                '' }}</span>
            </div>
            <div class="base-item">
              <span class="label" style="width:60px">服务时长:</span>
              <span>{{ joinInfo.contractStart }} ~ {{ joinInfo.contractEnd }}</span>
            </div>
            <div class="base-item">
              <span class="label">服务扣点:</span>
              <span>{{ joinInfo.platformCommissionPercent + joinInfo.partnerCommissionPercent }}%</span>
            </div>
            <div class="base-item">
              <span class="label" style="width:60px">小店分类:</span>
              <span>{{ joinInfo.shopTypeName }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    joinInfo: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      dialogShow: false
    }
  },
  methods: {
    show() {
      this.dialogShow = true
    }
  },
  // created() {
  //   // this.show()

  //   if (this.joinInfo.idPicture) {
  //     this.joinInfo.idPicture = this.joinInfo.idPicture.split(',')
  //   } else {
  //     this.joinInfo.idPicture = []
  //   }
  //   console.log(this.joinInfo.idPicture)
  // }
}
</script>

<style lang="scss" scoped>
.container {
  ::v-deep .el-dialog__header {
    color: #333333;
    font-size: 18px;
    font-weight: bold;
    padding: 27px 0 22px 27px;
  }

  ::v-deep .el-dialog__body {
    padding: 0 27px;
  }

  .box {
    border-top: 1px solid #D8D8D8;
    padding: 13px 4px;

    .title {
      color: #333333;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .base-info {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 20px;
      border-bottom: 1px solid #D8D8D8;
      margin-bottom: 12px;

      .base-item {
        margin-bottom: 20px;
        width: 300px;
      }

      .label {
        width: 90px;
        text-align: end;
        color: #666666;
      }

      span {
        display: inline-block;
        margin-right: 20px;
      }
    }

    .shop-info {
      color: #666666;

      .photo {
        margin-bottom: 35px;
      }

      .base-info {
        border-bottom: none;
      }

      img {
        width: 70px;
        height: 70px;
        border-radius: 4px;
        margin-left: 12px;
      }

      .no-data {
        color: #333333;
        margin-left: 12px;
      }
    }
  }
}
</style>
